<template>
  <s-modal title="历史" :visible="visible" width="800px" :footer="null" @cancel="visible = false">
    <div style="height: 500px">
      <s-scroll>
        <a-timeline>
          <a-timeline-item v-for="(item, index) in items" :key="index" @click="itemClick(item)">
            <div class="flow-history-title">{{ item.taskName }}</div>
            <div class="flow-history-content">{{ item.operationSummary }}</div>
            <div class="flow-history-operation">
              <a style="color: rgba(0, 0, 0, 0.65)">
                <s-icon type="user-outlined" />{{ item.createByAccount }}
              </a>
              <a style="color: rgba(0, 0, 0, 0.65); margin-left: 8px">
                <s-icon type="clock-circle-outlined" />{{ item.createDate }}
              </a>
            </div>
          </a-timeline-item>
        </a-timeline>
      </s-scroll>
    </div>
    <flow-history-detail ref="historyDetail" title="详情" />
  </s-modal>
</template>

<script>
import FlowHistoryDetail from './FlowHistoryDetail.vue'
export default {
  name: 'FlowHistory',
  components: { FlowHistoryDetail },
  data() {
    return {
      confirmLoading: false,
      visible: false,
      items: []
    }
  },
  methods: {
    itemClick(item) {
      this.$refs.historyDetail.init(
        '/workflow/flow/selectFormByTaskKeyAndProcessDefinitionId',
        { taskKey: item.taskKey, processDefineId: this.processDefineId },
        (that) => {
          this.$api
            .GET('/workflow/flow/historyDetail', {
              id: item.id,
              workFlowDefineId: this.workFlowDefineId
            })
            .then((res) => {
              that.formValue = res.data.formData.current
                ? res.data.formData.current.data
                : res.data.formData.start.data
              this.$refs.historyDetail.open()
            })
            .catch((e) => {
              this.$refs.historyDetail.close()
            })
        }
      )
    },
    open(dataId, workFlowDefineId, processDefineId) {
      this.processDefineId = processDefineId
      this.workFlowDefineId = workFlowDefineId
      this.$loading(true)
      this.$api
        .GET('/workflow/flow/history', { dataId, workFlowDefineId })
        .then((res) => {
          this.$loading(false)
          this.visible = true
          this.items = res.data
        })
        .catch((e) => {
          this.$loading(false)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.flow-history-title {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 22px;
  padding-top: 1px;
}
.flow-history-content {
  padding: 3px 0px 3px 0px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 22px;
}
.flow-history-time {
  padding: 3px 0px 3px 0px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  line-height: 20px;
}
</style>
